<!-- xml版本:html 5 -->
<!DOCTYPE html>
<html>
<head>
<!-- 设置浏览器解析该html时使用的编码字符集 -->
<meta charset="UTF-8">
<!-- 标题 -->
<title>HTML5</title>
<link>
<!-- 导入外部css样式 -->
<style type="text/css"></style>
<!-- css内部样式 -->
<script type="text/javascript"></script>

<!-- js内部和外部样式 -->
</head>
<body>
	<!-- 分区标签--用于统一管理多个标签 类似于容器 -->
	<header>头部</header>
	<hr>
	<nav>导航栏</nav>
	<hr>
	<article>
		<h1 align="center">Html5常用标签</h1>

		<h2>一、hn和p的对比</h2>
		<!-- div 确定逻辑分区 块级元素  -->
		<div>
			<!-- h1-h6 标签   默认样式:上下有空白行  左对齐  块级元素 -->
			<h2 align="right">标题2</h2>
			<h3 align="left">标题3</h3>
			<h4>标题4</h4>
			<h5>标题5</h5>
			<h6>标题6</h6>
			<!-- p标签  默认样式:上下有空白行  左对齐  块级元素 -->
			<p>段落，用于盛放文字或者控件,两端自带回车换行</p>
		</div>

		<h2>二、列表的嵌套</h2>
		<div>
			<!-- 默认自带一个阿拉伯数字序号,可以通过type设置 -->
			<!-- type类型  start起始值  reversed反转 -->
			<ol type="1" start="10" reversed="reversed">
				有序列表的标题：
				<li>有序列表</li>
				<li>有序列表</li>
				<li>有序列表</li>
				<ul>
					嵌套的无序列表：
					<!-- 在l级无序列表默认自带一个空心圆点(块级) -->
					<li>无序列表</li>
					<li>无序列表</li>
					<li>无序列表</li>
					<li>无序列表</li>
					<li>无序列表</li>
				</ul>
				<li>有序列表</li>
				<li>有序列表</li>
			</ol>
		</div>
		<div>
			<ol type="A">
				<li>1</li>
				<li>2</li>
				<!--虽然显示结果一样  但需注意li和内层ul的关系-->
				<ul type="disc">
					<!-- 样式:实心原点 -->
					<li>21</li>
					<li>22</li>
					<li>23</li>
				</ul>
				<li>3</li>
				<li>4
					<ul type="square">
						<!-- 样式:实心方形 -->
						<li>41</li>
						<li>42</li>
						<li>43</li>
					</ul>
				</li>
				<li>5</li>
				<li>6</li>
			</ol>
		</div>

		<h2>三、自定义列表</h2>
		<div>
			<dl>
				<dt>css网站</dt>
				<dd>网址为www.divcss5.com</dd>
				<dt>div css网站</dt>
				<dd>网址为www.divcss5.com</dd>
				<dt>div+css网站</dt>
				<dd>网址为www.divcss5.com</dd>
				<dd>网址为www.divcss6.com</dd>
			</dl>
		</div>

		<h2>四、行内分区和转义字符</h2>
		<div>
			<p>
				回车<span style="color: red">&lt;br&gt;</span>&nbsp;&nbsp;和&nbsp;&nbsp;空格<span
					style="color: yellow">&amp;nbsp;</span>
			</p>
			<!-- br 回车换行  -->
			<br> <br> <br> <br> <br />
			<!-- 水平横线,灰色   -->
			<hr />

			<p>
				字体:<em>斜体</em><i>(行内元素)</i>、<strong>粗体</strong><b>(行内元素)</b>、<u>下划线(行内元素)</u>和
				<del>删除线</del>
				<s>(行内元素)</s>、 <span
					style="color: blue">span标签是没有语义的,它的作用就是为了单独设置样式用(行内元素)</span> 等
			</p>
			<h3>空格折叠</h3>
			<p>
				那是一个&nbsp;&nbsp;&nbsp;秋天，<br> 看着传奇&nbsp;&nbsp;&nbsp;跑偏。<br>
				奔着克晶&nbsp;&nbsp;&nbsp;而去，<br> 误入老苍&nbsp;&nbsp;&nbsp;心间。<br>
			</p>

			<h4>引用的标签</h4>
			海子的<q>面朝大海,春暖花开</q>带给人无限的遐想.
			<!-- q标签 引用别人的一小段话,会自动加上引号 (行级元素) -->
			<br> 引用长文本:
			<blockquote>相见时难别亦难,东风无力百花残.春蚕到死丝方尽,蜡炬成灰泪始干</blockquote>
			0.0
			<!-- blockquoto 块级元素 缩进显示  无"" -->
			<h4>其他标签</h4>
			00
			<address>联系地址信息(斜体,块级元素)</address>
			可以是邮件地址,实际地址,文档签名等等<br>
			<code>代码语言块(行级):这里面可以写一行代码:System.out.println("World");//输出HelloWorld</code>
			<pre>多行代码:(块级)预格式化的文本,被pre包围的文本一般会保留空白换行
	package basic.day01; //声明包day01
	public class HelloWorld { //声明类HelloWorld
	public static void main(String[] args) {//main函数是static修饰的，直接调用的方法只能是static修饰的，若调实例方法则需创建对象
		//1)严格区分大小写
		//2)所有符号必须都是英文模式的
		//3)每句话必须以分号结尾
		//4)println():输出并换行  print():输出不换行
   
		
		System.out.print("Hello"); 
		System.out.println("World");//输出HelloWorld
		}
	}
	</pre>
		</div>

		<h2>五、图片标签</h2>
		<div style="background-color: green">

			绝对路径（盗链）：<img
				src="http://tb.himg.baidu.com/sys/portrait/item/33b8884c?t=1444923352"
				title="LY_飘涯"> <br> 相对路径：<img alt="加载失败的迷彩小兵"
				src="../img/12.png" width="100px" title="迷彩小兵">
		</div>
		<div>
			<!-- #代表当前页面 -->
			<img src="14.jpg" usemap="#mymap">
			<map name="mymap">
				<!-- area:可点击的区域  shape:形状 rect矩形/circle圆形-->
				<!-- href:资源路径  页面资源和文件资源  如果是文件资源 浏览器支持浏览则浏览不支持则下载 -->
				<area shape="rect" coords="0,0,100,100" href="http://www.baidu.com">
				<area shape="circle" coords="150,150,50" href="day01_am.zip">
			</map>
		</div>

		<h2>六、超链接与锚点</h2>
		<div>
			<a
				href="https://tieba.baidu.com/f?ie=utf-8&kw=dnf%E6%B7%B1%E4%BA%95%E5%86%B0">我逝去的贴吧</a>&nbsp;&nbsp;<a
				href="lol.html" target="_blank">lol介绍</a> <br> <a
				href="../img/06.png">迷彩小兵图片</a> <br> <a
				href="mailto:dglydrpy@qq.com?cc=bbb@yyy.com&bcc=ccc@zzz.com&subject=主题&body=邮件内容">给我发邮件</a>
			<br>
			<p>Mailto后为收件人地址，cc后为抄送地址，bcc后为密件抄送地址，subject后为邮件的主题，body后为邮件的内容，如果Mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的每一个都以“&”开头</p>
			<h3>锚点</h3>
			<ul>
				<li><a href="#d1">去form表单</a></li>
				<li><a href="#d2">去脚部图片</a></li>
			</ul>
		</div>

		<h2>七、表格</h2>
		<div>
			<h3>
				<table border="2px" width="300px" cellpadding="10px"
					cellspacing="10px" bordercolor="#66a5ff"
					summary="这是摘要,只是为了增强表格代码的可读性,浏览器不会显示,搜索引擎搜索表格时更明确">
					<caption>表格标题:二维表格的合并</caption>
					<tr>
						<th colspan="4">11</th>
						<td>15</td>
					</tr>
					<tr>
						<th rowspan="2">21</th>
						<td>22</td>
						<td>23</td>
						<td>24</td>
						<td>25</td>
					</tr>
					<tr>
						<th colspan="3">33</th>
						<th rowspan="2">35</th>
					</tr>
					<tr>
						<td>41</td>
						<td>42</td>
						<td>43</td>
						<td>44</td>
					</tr>
					<tr>
						<td>51</td>
						<th colspan="4">52</th>
					</tr>
				</table>

				<table width="300px" height="300px" border="2px">
					<tr>
						<td colspan="2"></td>
						<td rowspan="2"></td>
					</tr>
					<tr>
						<td rowspan="2"></td>
						<td></td>
					</tr>

					<tr>
						<td colspan="2"></td>
					</tr>
				</table>
		</div>

		<h2 id="d1">八、form表单</h2>
		<div>
			<form action="url" method="get">
				<div>
					<h3>input标签--1.文本框</h3>
					<!--name=输入内容 readonly：设置只读-->
					<label>用户名：</label> <input type="text" name="username"
						placeholder="请输入用户名" maxlength="8px" style="width: 120px">
				</div>
				<div>
					<h3>input标签--2.密码框</h3>
					<!--name=输入值-->
					<label>密码：</label> <input type="password" name="password"
						placeholder="请输入密码" maxlength="8px" style="width: 120px">
				</div>
				<div>
					<h3>input标签--3.单选框</h3>
					<!--name=value-->
					<label>性别：</label> <input type="radio" name="gender" id="y"
						value="man"> <label for="y">男</label> <input type="radio"
						name="gender" id="x" value="woman"> <label for="x">女</label>
					<input type="radio" name="gender" id="un" value="unknow"
						checked="checked"> <label for="un">保密</label>
				</div>
				<div>
					<h3>input标签--4.复选框</h3>
					<!--name=value-->
					<label>兴趣：</label> <input type="checkbox" name="hobby"
						value="study" id="1"> <label for="1">学习</label> <input
						type="checkbox" name="hobby" value="swiming" id="2"> <label
						for="2">游泳</label> <input type="checkbox" name="hobby"
						value="running" id="3"> <label for="3">跑步</label> <input
						type="checkbox" name="hobby" value="music" id="4"> <label
						for="4">听音乐</label> <input type="checkbox" name="hobby"
						value="game" id="5"> <label for="5">玩游戏</label> <input
						type="checkbox" name="hobby" value="other" id="6" checked>
					<!-- 直接checked也表选择  -->
					<label for="6">其它</label>
				</div>
				<div>
					<h3>input标签--5.按钮框</h3>
					<input type="submit" value="注册"> <input type="button"
						value="调用JS代码" onclick="alert('没用的按钮！')"> <input
						type="reset" value="重置">
				</div>
				<div>
					<input type="checkbox" id="auto" name="autologin">
					<!--无value值 name=on-->
					<label for="auto">自动登录</label>
				</div>
				<div>
					<h3>input标签--6.隐藏域</h3>
					<!--name=value 不显示但会提交-->
					<input type="hidden" name="cartid" value="123">
				</div>
				<div>
					<h3>input标签--7.文件选择</h3>
					<input type="file" value="img" multiple="multiple">
				</div>
				<div>
					<h3>input标签--8.日期选择</h3>
					<input type="date" name="birthday">
				</div>
				<h3>非input标签--下拉框</h3>
				<!--name=value 若无value则为相应选项的文本-->
				<label>地址：</label> <select name="adress" style="width: 80px"
					multiple="multiple">
					<option >--请选择：--</option>
					<option value="1">--广州--</option>
					<option value="2">--上海--</option>
					<option value="3">--重庆--</option>
					<option value="4" selected="selected">--成都--</option>
					<option value="5">--贵州--</option>
					<option value="6">--武汉--</option>
					<option value="7">--新疆--</option>
				</select>
				<p>下拉框的多选:加multiple属性 ctrl+左键</p>
				<div>
					<h3>非input标签--文本域</h3>
					<h3>个人评价：</h3>
					<textarea rows="10" cols="40" placeholder="请输入文本"></textarea>
					<!-- 可以在css中替代rows和cols  -->
				</div>
			</form>
		</div>
		<div>
			<!-- 网页的顶部默认就是锚，没有名字 -->
			<p>
				<a href="#">回到顶部</a>
			</p>
		</div>
	</article>
	<footer>
		<hr>
		脚部 <br> <img id="d2"
			src="http://cdn.tmooc.cn/bsfile//imgad///2A763EDADF174F26960C6A8E0972049A.png"
			width="30%" title="呵呵">
	</footer>
</body>
</html>